<template>
  <div id="app">
    <nav class="navbar">
      <div class="nav-container">
        <div class="nav-brand">
          <h1>AI侦探游戏</h1>
        </div>
        <div class="nav-menu">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/cases" class="nav-link">案件</router-link>
          <router-link to="/players" class="nav-link">玩家</router-link>
          <router-link to="/leaderboard" class="nav-link">排行榜</router-link>
        </div>
        <div class="nav-user">
          <div v-if="playerStore.isLoggedIn" class="user-info">
            <span class="user-name">{{ playerStore.currentPlayer?.nickname }}</span>
            <button @click="handleLogout" class="logout-btn">登出</button>
          </div>
          <div v-else class="user-guest">
            <router-link to="/login" class="login-btn">登录</router-link>
          </div>
        </div>
      </div>
    </nav>
    
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { usePlayerStore } from '@/stores/player';

const router = useRouter();
const playerStore = usePlayerStore();

const handleLogout = async () => {
  try {
    await playerStore.logout();
    router.push('/');
  } catch (error) {
    console.error('登出失败:', error);
  }
};

onMounted(async () => {
  // 加载玩家数据
  try {
    await playerStore.loadPlayers();
  } catch (error) {
    console.error('加载玩家数据失败:', error);
  }
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
}

:root {
  --color-primary: #007acc;
  --color-primary-dark: #005a9e;
  --color-secondary: #6c757d;
  --color-secondary-dark: #545b62;
  --color-background: #ffffff;
  --color-background-soft: #f8f9fa;
  --color-background-mute: #e9ecef;
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  --color-border: #dee2e6;
  --color-border-hover: #adb5bd;
}

#app {
  min-height: 100vh;
}

.navbar {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.nav-brand h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.nav-menu {
  display: flex;
  gap: 24px;
}

.nav-link {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: var(--color-background-soft);
  color: var(--color-primary);
}

.nav-link.router-link-active {
  background: var(--color-primary);
  color: white;
}

.nav-user {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-name {
  font-weight: 500;
  color: var(--color-text);
}

.logout-btn {
  padding: 6px 12px;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: var(--color-background-soft);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.login-btn {
  padding: 8px 16px;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.login-btn:hover {
  background: var(--color-primary-dark);
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 64px);
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    height: auto;
    padding: 12px 0;
    gap: 12px;
  }
  
  .nav-menu {
    gap: 12px;
  }
  
  .main-content {
    padding: 16px;
  }
}
</style>